<div id="inner-container" class="content">
  <div class="row">
      <div class="col-md-3 pull-left">
          <!--左侧目录-->
          <div class="box box-solid" [ngClass]="{true:'collapsed-box'}[schema?true:false]" class="newbg">
              <div class="box-header with-border">
                  <!-- <i class="fa fa-bar-chart-o"></i>  -->
                  <i [ngClass]='classObject'></i>
                  <!-- <h3 class="box-title">{{menuarr}}</h3> -->
                  <h3 class="box-title">{{widgetTitle}}</h3>
                  <div class="box-tools pull-right">
                      <i class="fa fa-info toolbar-icon" (click)="showInfo()" title="{{'COMMON.INFORMATION'|translate}}"></i>&nbsp;
                      <i class="fa fa-plus toolbar-icon" (click)="newWgt()" title="{{'COMMON.NEW'|translate}}"></i>&nbsp;
                      <i *ngIf="!liteMode" class="fa fa-copy toolbar-icon" (click)="copyNode()" title="{{'COMMON.COPY'|translate}}"></i>&nbsp;
                      <i *ngIf="!liteMode" class="fa fa-edit toolbar-icon" (click)="editNode()" title="{{'COMMON.EDIT'|translate}}"></i>&nbsp;
                      <i *ngIf="!liteMode" class="fa fa-trash-o toolbar-icon" (click)="deleteNode()" title="{{'COMMON.DELETE'|translate}}"></i>&nbsp;
                      <i class="fa fa-reorder toolbar-icon" (click)='toToggle()'></i>
                  </div>
              </div>

              <!--树形目录-->
              <div class="box-body" [@shrinkOut]='isActive?"in":"*"' style='overflow:hidden'>
                  <input type="text" class="form-control" placeholder="SearcngModuleh" [(ngModel)]="keywords" (change)="searchNode()" title="dsr:kylin ds:Bill wg:test">
                  <div class="panel-body" style="padding: 10px 0px; overflow-x: auto; font-size: small; max-height: 45vh">
                      <!-- <div id="widgetTreeID" js-tree="treeConfig" should-apply="applyModelChanges()" [(ngModel)]="treeData" tree="treeInstance" tree-events-obj="treeEventsObj">
                        </div> -->
                        <app-treedemo [modalShow]='modalshow' [bgshow]='bgShow' (outdata)='revise($event)' (nodedata)='nodedata($event)' [deleteshow]='deleteShow' [widgetlist]='widgetList' (modalclose)='getModal($event)' (chartype)="charType($event)" (dataset)="getDataSet($event)" (status)="status($event)"></app-treedemo>
                  </div>
              </div>
          </div>

          <!--左侧数据集-->
          <div class="box box-solid" *ngIf="schema">
              <div class="box-header with-border">
                  <i class="fa fa-cube"></i> <h3 class="box-title"> {{'CONFIG.DATASET.DATASET'|translate}}数据集</h3>
                  <div class="box-tools pull-right">
                      <i class="fa fa-refresh toolbar-icon" (click)="refreshSchema()"></i>&nbsp;
                      <i class="fa fa-reorder toolbar-icon" data-widget="collapse"></i>
                  </div>
              </div>
              <div class="box-body">
                <app-schema></app-schema>
              </div>
          </div>
      </div>


<!--右侧-->
      <div style="padding-left: 0px;" class="pull-right col-md-9">
          <div class="box" *ngIf="optFlag == 'new' || optFlag == 'edit'">
              <div class="box-header with-border">
                    <div class="user-block">
                        <span class="username" style="margin-left: 0px;">{{widgetName}}</span>
                        <span class="description" style="margin-left: 0px;">{{getCurDatasetName()}}</span>
                    </div>
                  <!--新建/编辑-->
                  <div class="box-tools pull-right" [ngSwitch]="optFlag">
                      <span *ngSwitchCase="'edit'" class="label label-info">{{'COMMON.EDIT'|translate}}</span>
                      <span *ngSwitchCase="'new'" class="label label-danger">{{'COMMON.NEW'|translate}}</span>
                  </div>
              </div>

              <div class="box-body" style="min-height: 66vh;">
                  <div class="row">
                      <div class="col-md-12 form-horizontal">
                          <!--选择数据集-->
                          <div *ngIf="!liteMode">
                              <div class="row" *ngIf="!customDs">
                                  <div class="col-md-12">
                                      <div class="form-group">
                                          <label class="col-sm-2 control-label">{{'CONFIG.WIDGET.DATASET'|translate}}</label>
                                          <div class="col-sm-10 pull-right">
                                              <el-select class="col-sm-12" [model]="curWidget.datasetId" placeholder="请选择" (modelChange)="handle($event)">
                                                <el-option *ngFor="let item of datagroup"
                                                  [label]="item.name"
                                                  [value]="item.value">{{item.name}}
                                                </el-option>
                                              </el-select>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="row" *ngIf="customDs">
                                  <div class="col-md-12">
                                      <div class="form-group">
                                          <label class="col-md-2 control-label">{{'CONFIG.WIDGET.DATA_SOURCE'|translate}}</label>
                                          <div class="col-md-10">
                                                <el-select class="col-sm-12" [model]="curWidget.datasetId" placeholder="请选择" (modelChange)="handle($event)">
                                                    <el-option *ngFor="let item of datagroup"
                                                        [label]="item.name"
                                                        [value]="item.value">{{item.value}}
                                                    </el-option>
                                                </el-select>
                                                
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          
                              <div class="row">
                                  <div class="col-md-12">
                                      <div class="form-group">
                                            <div class="col-sm-offset-2 col-xs-12 col-sm-5 col-md-4 col-lg-2">
                                                <a class="btn btn-block btn-success" (click)="customDs=!customDs">
                                                    <i class="fa fa-fw {{customDs?'fa-table':'fa-edit'}}"></i>{{(customDs?'CONFIG.WIDGET.EXIST_QUERY':'CONFIG.WIDGET.NEW_QUERY')|translate}}
                                                </a>
                                            </div>
                                          <div class="col-xs-12 col-sm-5 col-md-4 col-lg-2">
                                              <button class="btn btn-block btn-success" (click)="loadData()">
                                                  {{'CONFIG.WIDGET.LOAD_DATA'|translate}}
                                              </button>
                                          </div>
                                          <div class="col-xs-12 col-sm-5 col-md-3 col-lg-2">
                                              <label>
                                                  <input type="checkbox" [(ngModel)]="loadFromCache"> {{'CONFIG.WIDGET.FROM_CACHE'|translate}}
                                              </label>
                                          </div>
                                      </div>
                                      <div class="form-group">
                                          <div class="col-sm-offset-2 col-sm-10">
                                              <p-messages [(value)]="alerts"></p-messages>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <hr/>
                              <div class="row">
                                  <div class="col-md-12">
                                      <div class="form-group" [ngClass]="{'has-error': !(verify.widgetName || widgetName)}">
                                      <label class="col-sm-2 control-label">{{'CONFIG.WIDGET.WIDGET_NAME'|translate}}图表名</label>
                                      <div class="col-sm-10">
                                              <input id="widgetName" [(ngModel)]="widgetName" class="form-control col-sm-10" placeholder="{{'CONFIG.WIDGET.CATEGORY'|translate}}/{{'CONFIG.WIDGET.WIDGET_NAME'|translate}}"/>{{widgetName}}
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="row">
                                  <div class="col-md-12">
                                      <div class="form-group" [ngClass]="{'has-error': !(verify.widgetName || widgetName)}">
                                          <label class="col-sm-2 control-label">主图日期过滤字段</label>
                                          <div class="col-sm-10">
                                              <input id="masterDashboardDateFilterColumn" [(ngModel)]="masterDashboardDateFilterColumn" class="form-control col-sm-10" placeholder="数据库字段"/>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="row">
                                  <div class="col-md-12">
                                      <div class="form-group" [ngClass]="{'has-error': !(verify.widgetName || widgetName)}">
                                          <label class="col-sm-2 control-label">过滤日期格式</label>
                                          <div class="col-sm-10">
                                              <input id="masterDashboardDateFilterFormat" [(ngModel)]="masterDashboardDateFilterFormat" class="form-control col-sm-10" placeholder="moment日期格式(默认YYYY-MM-DD)"/>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>

                          <!--图表类型-->
                          <div class="row" *ngIf="schema">
                                <div class="col-md-12 ng-scope">
                                    <div class="form-group" style="margin-bottom: 0px">
                                        <label class="col-sm-2 control-label">{{'CONFIG.WIDGET.WIDGET_TYPE'|translate}}图表类型</label>
                                        <div class="col-sm-10 chart-type">
                                            <ul class="list-inline">
                                                <li *ngFor='let chart of chart_types' class="ng-scope nav-item" style="position:relative" [ngClass]="[chart_types_status[chart.value]] && chart.value == curWidget.config.chart_type ? 'active':''" (click)='changeChart(chart.value)'>

                                                    <popover-content #widgetTipTemplate 
                                                    title={{chart.name}}
                                                    placement="bottom">
                                                    <div [popover]='widgetTipTemplate'>
                                                        <span><b>{{chart.row}}</b> &nbsp; {{'CONFIG.WIDGET.TIPS_ROW_DIM'|translate}} </span><br/>
                                                        <span><b>{{chart.column}}</b> &nbsp; {{'CONFIG.WIDGET.TIPS_COLUMN_DIM'|translate}} </span><br/>
                                                        <span><b>{{chart.measure}}</b> &nbsp; {{'CONFIG.WIDGET.TIPS_MEASURE'|translate}} </span><br/>
                                                    </div>
                                                    </popover-content>
                                                    <a class="ng-scope"
                                                        [ngClass]="[chart_types_status[chart.value]] && chart.value == curWidget.config.chart_type ? 'active':''">
                                                        <i class="chart-type-icon {{chart.class}} "
                                                            [ngClass]="{true:'',false:'disabled' }[chart_types_status[chart.value]]"></i>
                                                    </a>
                                                </li>
                                                
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!--列维/行维/过滤-->
                                <div class="col-md-12">
                                    <div class="form-group ng-scope">
                                        <app-group (group)='groupdata($event)'></app-group>
                                    </div>
                                    <div class="form-group ng-scope">
                                        <app-keys (keys)='keysdata($event)'></app-keys>
                                    </div>
                                    <div class="form-group ng-scope">
                                        <app-filters (filters)='filtersdata($event)'></app-filters>
                                    </div>
                                    <div class="form-group ng-scope">
                                        <app-table-style [chartType]='chartype'></app-table-style>
                                    </div>
                                    <div class="form-group ng-scope">
                                        <app-funnel (funnel)='funneldata($event)' [chartType]='chartype'></app-funnel>
                                    </div>
                                    <div class="form-group ng-scope">
                                        <app-pie [chartType]='chartype'></app-pie>
                                    </div>
                                </div>
                            </div>

                              <!--图表展示选项卡-->
                            <div class="row" style="margin:10px -9px">
                                    <div class="col-md-12" style="padding: 0px">
                                        <div class="nav-tabs-custom">
                                            <ul class="nav nav-tabs">
                                                <li [ngClass]="item=='preview_widget2'?'active':''">
                                                    <a id="preview_widget_tab" #previewTab (click)="tabtoggle('preview_widget2')">Preview</a>
                                                </li>
                                                <li [ngClass]="item=='viewQuery_widget'?'active':''">
                                                    <a id="viewQuery_widget_tab" (click)="tabtoggle('viewQuery_widget')">Query</a>
                                                </li>
                                                <li [ngClass]="item=='options'?'active':''">
                                                    <a id="options_tab" (click)="tabtoggle('options')">Option</a>
                                                </li>
                                                <!--预览/预览查询/保存/取消-->
                                                <li class="pull-right">
                                                    <button type="submit" (click)="preview('preview_widget2',chartype);item=='preview_widget2'"
                                                            class="btn btn-success btn-sm">
                                                        {{'CONFIG.WIDGET.PREVIEW'|translate}}
                                                    </button>
                                                    <button type="submit" (click)="previewQuery();item=='viewQuery_widget';tabtoggle('viewQuery_widget')"
                                                            class="btn btn-success btn-sm">
                                                        {{'CONFIG.WIDGET.PREVIEW_QUERY'|translate}}
                                                    </button>
                                                    <button type="submit" (click)="saveWgt(optFlag,treeId)"
                                                            class="btn btn-success btn-sm">
                                                        {{'CONFIG.WIDGET.SAVE'|translate}}
                                                    </button>
                                                    <button type="submit" (click)="doCancel()"
                                                            class="btn btn-danger btn-sm">
                                                        {{'CONFIG.WIDGET.CANCEL'|translate}}
                                                    </button>
                                                    <button type="submit" (click)="switchLiteMode()"
                                                            class="btn btn-info btn-sm">
                                                        {{liteMode ? 'S' : 'L'}}
                                                    </button>
                                                </li>
                                            </ul>
                                            <!--线图展示-->
                                            <div class="tab-content" style="min-height: 43vh;">
                                                <div class="tab-pane active" id="preview_widget2" [ngClass]="{'preview_widget2': 'active'}[tab]"
                                                    style="min-height: 300px;height: 100%;overflow: hidden;">
                                                    <div *ngIf="!loadingPre" id="preview_widget" style="min-height: 300px;">
                                                        <div [style.display]="item=='preview_widget2'?'block':'none'">
                                                            <!-- <app-chart [chart]='chartType' [chartShow]='chartShow'></app-chart> -->
                                                        </div>
                                                        <div [style.display]="item=='viewQuery_widget'?'block':'none'">
                                                                <app-querytab></app-querytab>
                                                        
                                                        </div>
                                                        <div [style.display]="item=='options'?'block':'none'">
                                                                <app-optiontab></app-optiontab>
                                                        </div>
                                                    </div>

                                                    <div class="overlay fa box box-solid" *ngIf="loadingPre" style="min-height: 300px;">
                                                        <div class="box-header">
                                                            <!--<h3 class="box-title"></h3>-->
                                                            <div class="box-tools pull-right">
                                                                <button type="button" class="btn btn-box-tool" data-widget="remove">
                                                                    <i class="fa fa-times" style="font-size: large"></i></button>
                                                            </div>
                                                        </div>
                                                        <i class="fa fa-spinner fa-spin"></i>
                                                        
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                      </div>
                  </div>
              </div>

              <div class="box-footer">
              </div>

              <div class="overlay fa box box-solid" *ngIf="loading">
                  <div class="box-header with-border">
                      <!--<h3 class="box-title"></h3>-->
                      <div class="box-tools pull-right">
                          <button type="button" class="btn btn-box-tool" data-widget="remove">
                              <i class="fa fa-times" style="font-size: large"></i></button>
                      </div>
                  </div>
                  <i class="fa fa-spinner fa-spin"></i>
              </div>
          </div>
      </div>
  </div>
</div>

